<template>
  <div
    v-if="visiable"
    class="plugin-option__inner"
  >
    <em-cell-group title="顶部标题设置">
      <em-cell
        v-if="options.title!==undefined"
        title="标题内容"
        center
        :border="false"
      >
        <div class="params-input">
          <el-input
            v-model="options.title"
            placeholder="设置空时不显示标题"
          />
        </div>
      </em-cell>
      <em-cell
        v-if="options.description!==undefined"
        title="描述信息"
        center
        :border="false"
      >
        <div class="params-input">
          <el-input
            v-model="options.description"
            placeholder="设置空时不显示描述"
          />
        </div>
      </em-cell>
      <em-cell
        v-if="options.thumb!==undefined"
        title="标题栏位图"
        label="建议上传图标大小：125px * 30px"
        :border="false"
      >
        <image-picker
          v-model="options.thumb"
          size="large"
          removable
        />
      </em-cell>
      <tag-field
        v-if="options.tag!==undefined"
        v-model="options.tag"
      />
      <em-cell
        v-if="options.linkText!==undefined"
        title="链接文本"
        center
        :border="false"
      >
        <div class="params-input">
          <el-input
            v-model="options.linkText"
            placeholder="文本"
          />
        </div>
      </em-cell>
    </em-cell-group>
  </div>
</template>

<script>
import ImagePicker from '@/components/ImagePicker'
import TagField from './TagField'
export default {
  name: 'HeaderOption',
  components: {
    ImagePicker,
    TagField
  },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {
    options() {
      return this.value
    },
    visiable() {
      if (!this.options) {
        return false
      } else {
        return (
          this.options.title !== undefined ||
          this.options.description !== undefined ||
          this.options.thumb !== undefined ||
          this.options.tag !== undefined ||
          this.options.linkText !== undefined
        )
      }
    }
  },
  mounted() {}
}
</script>

